<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script>
    <title>订单统计</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 订单管理 <span class="c-gray en">&gt;</span> 订单统计 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray mt-20" style="margin-top: 0px;">
		<span class="l">

			&nbsp;&nbsp;下单时间：
            <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'endDate\')}',dateFmt:'yyyy-MM-dd HH:mm:ss' })" id="startDate" name="startDate" class="input-text Wdate" style="width:160px;">
            -
            <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'startDate\')}',dateFmt:'yyyy-MM-dd HH:mm:ss' })" id="endDate" name="endDate" class="input-text Wdate" style="width:160px;">
			&nbsp;&nbsp;<a href="javascript:;" onclick="getCustomData()" class="btn btn-success">确定</a>
		</span>
    </div>
    <div id="tab_demo" class="HuiTab" style="margin-top:15px">
        <div class="tabBar clearfix"><span>订单概况</span><span>支付方式</span></div>
        <div class="tabCon" id="statusChart" style="height: 400px;width: 800px;">
        </div>
        <div class="tabCon" id="payTypeChart" style="height: 400px;width: 800px;">
        </div>
    </div>

</div>


<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/echarts.common.min.js"></script>
<script type="text/javascript">

    $(function () {
        $("#tab_demo").Huitab(0);
        getStatusChartData();
        getPayTypeChartData();
        $("#tab_demo").Huitab({
            index:0
        });
    })


    // 基于准备好的dom，初始化echarts实例
    var statusChart = echarts.init(document.getElementById('statusChart'), 'light');
    var payTypeChart = echarts.init(document.getElementById('payTypeChart'), 'light');
    var payTypeSeriesData=[], statusSeriesData=[],startDate,endDate;

    var statusArr = ['待审批','待付款', '配货中','已完成','取消','无效', '部分发货', '审批未通过'];
    var payTypeArr = ['支付宝','部门余额'];

    function getStatusChartData() {
        statusSeriesData=[];
        var index = layer.load(3);
        $.ajax({
            type: 'GET',
            url: '/order/statisticStatus',
            dataType: 'json',
            data:{
                startTime: startDate,
                endTime: endDate,
            },
            success: function(data){
                layer.close(index);
                if(data.success!=true){
                    layer.alert(data.message,{title: '错误信息',icon: 2});
                    return;
                }

                $.each(data.result, function (i,val) {
                    console.log(val);
                    var obj = new Object();
                    obj.value = val.num;
                    obj.name = statusArr[val.status];
                    statusSeriesData.push(obj);
                    drawChart(0);

                })
            },
            error:function(XMLHttpRequest){
                layer.close(index);
                layer.alert('数据处理失败! 错误码:'+XMLHttpRequest.status,{title: '错误信息',icon: 2});
            }
        });
    }


    function getPayTypeChartData() {
        payTypeSeriesData=[];
        var index = layer.load(3);
        $.ajax({
            type: 'GET',
            url: '/order/statisticPayType',
            dataType: 'json',
            data:{
                startTime: startDate,
                endTime: endDate,
            },
            success: function(data){
                layer.close(index);
                if(data.success!=true){
                    layer.alert(data.message,{title: '错误信息',icon: 2});
                    return;
                }

                $.each(data.result, function (i,val) {
                    console.log(val);
                    var obj = new Object();
                    obj.value = val.num;
                    obj.name = payTypeArr[val.payType];
                    payTypeSeriesData.push(obj);
                    drawChart(1);
                })
            },
            error:function(XMLHttpRequest){
                layer.close(index);
                layer.alert('数据处理失败! 错误码:'+XMLHttpRequest.status,{title: '错误信息',icon: 2});
            }
        });
    }

    function getCustomData() {
        startDate = $('#startDate').val();

        endDate = $('#endDate').val();

        getPayTypeChartData();
        getStatusChartData();
    }


    function drawChart(type) {
        var series;
        if (type == 0){
            series = statusSeriesData;
        } else{
            series = payTypeSeriesData;
        }
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '',
                left: 'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                // orient: 'vertical',
                // top: 'middle',
                bottom: 10,
                left: 'center'
                // data: legendData
            },
            series : [
                {
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data:series,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        if (type == 0){
            statusChart.setOption(option);
        } else{
            payTypeChart.setOption(option);
        }

    }
</script>
</body>
</html>